<template>

      <div class="content">
        <!-- 我的 -->
        <div class="myorderform">
          <div class="myset">
            <img src="https://versionlibraryweb.oss-cn-hangzhou.aliyuncs.com/atxznmvgmza3ul5ybdoa.jpg"/>
            <div>13027107951</div>
            <div>
              <b>易宝</b>
              <span>￥0</span>
            </div>
          </div>
          <!-- <div class="myorderform-title">我是买家</div> -->
          <div
            @click="tabtop(1)"
            :class="current == 1 ? 'goodsbuy goodsbuyatv' : 'goodsbuy'"
            >在线充值</div
          >
          <div
            @click="tabtop(2)"
            :class="current == 2 ? 'goodsbuy goodsbuyatv' : 'goodsbuy'"
            >商品订单</div
          >
          <div
            @click="tabtop(3)"
            :class="current == 3 ? 'goodsbuy goodsbuyatv' : 'goodsbuy'"
            >充值订单</div
          >
          
        </div>
        <!-- 订单 -->
        <div class="orderform">
          <div v-if="current == 2">
            <div class="allorders">
              <div
                @click="orderform(1)"
                :class="
                  indent == 1
                    ? 'cancellation-order cancellation-active'
                    : 'cancellation-order'
                "
                >全部订单</div
              >
              <div
                @click="orderform(2)"
                :class="
                  indent == 2
                    ? 'cancellation-order cancellation-active'
                    : 'cancellation-order'
                "
                >待付款</div
              >
              <div
                @click="orderform(3)"
                :class="
                  indent == 3
                    ? 'cancellation-order cancellation-active'
                    : 'cancellation-order'
                "
                >交易中</div
              >
              <div
                @click="orderform(4)"
                :class="
                  indent == 4
                    ? 'cancellation-order cancellation-active'
                    : 'cancellation-order'
                "
                >已完成</div
              >
              <div
                @click="orderform(5)"
                :class="
                  indent == 5
                    ? 'cancellation-order cancellation-active'
                    : 'cancellation-order'
                "
                >已取消</div
              >
            </div>
            <div class="search-programa">
                  <el-input
                    size="mini"
                    placeholder="请输入内容"
                    v-model="searchinput"
                    clearable
                    class="search-input">
                  </el-input>
                  <el-button class="search-but" type="danger"></el-button>
            </div>
            <div class="indent">
                   <el-table
                   :header-cell-style="{background:'#FAFAFA',color:'#001013',fontWeight:'bold'}"
                    :data="tableData"
                    style="width: 100%">
                    <el-table-column
                      prop="date"
                      label="购买商品"
                      >
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="订单编号"
                      >
                    </el-table-column>
                    <el-table-column
                      prop="address"
                      label="购买时间">
                    </el-table-column>
                    <el-table-column
                      prop="address"
                      label="下载">
                    </el-table-column>
                  </el-table>
            </div>
          </div>
          <div v-if="current == 1">
                      <div class="recharge-hd">在线充值</div>
                      <div class="recharge-bd">
                          <el-form ref="form" label-width="100px"  label-position="left" :model="formData" :rules="rules">
                            <el-form-item prop="money" label="充值金额">
                              <el-input  size="mini" @input="formData.money=Number(formData.money.replace(/[^\d.]/g,''))" v-model="formData.money" placeholder="请输入充值金额"></el-input>
                            </el-form-item>
                          </el-form>
                          <div class="form-field">
                            <div>支付通道：</div>
                            <div class="notice-type">
                                <el-radio-group v-model="configId" >
                                  <el-radio :label="item.id"  v-for="item,i in configIdList" :key="i"><img src="../assets/images/ALIPAY.jpg" />{{item.title}}</el-radio>
                                </el-radio-group>
                            </div>
                          </div>
                          <el-button class="recharg-but" :disabled="disabled" @click="rechargBut" type="danger" size="mini">确定充值</el-button>
                      </div>
          </div>
          <div v-if="current == 3">
            <div class="indent">
                   <el-table
                   :header-cell-style="{background:'#FAFAFA',color:'#001013',fontWeight:'bold'}"
                    :data="tableData"
                    style="width: 100%">
                    <el-table-column
                      prop="date"
                      label="购买商品"
                      >
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="订单编号"
                      >
                    </el-table-column>
                    <el-table-column
                      prop="address"
                      label="购买时间">
                    </el-table-column>
                    <el-table-column
                      prop="address"
                      label="下载">
                    </el-table-column>
                  </el-table>
            </div></div>
        </div>



        <el-dialog width="400px" :close-on-click-modal="false" center title="微信或支付宝扫码支付" :visible.sync="qrCodeUrlcod">
					<div class="popup-content" v-if="!isPayStatus">
						<div>订单号：<span style="font-size: 22px;color: #e03104;font-weight: 600;">21321321321321</span></div>
						<div style="margin-bottom: 10px;">付款金额：<span style="font-size: 22px;color: #e03104;font-weight: 600;">21321321321321</span></div>
						<div class="qrCodeUrl"  ref="qrCodeUrl" v-if="!isOut" ></div>
						<div class="out" v-if="isOut">支付超时...</div>
						<div style="text-align: center; margin-top: 10px;">
							<img  class="con-t-watpay" src="../assets/images/t-12.png" />请使用支付宝APP扫描二维码支付。
						</div>
					</div>
					<div class="popup-content" v-if="isPayStatus">
							<div class="isPayStatus-box">
									<div class="isPayStatus-hd">
										<img src="../assets/images/t-10.png" />
										订单支付成功
									</div>
									<div class="isPayStatus-bd">
										<div class="isPayStatus-item">
											<div class="text-itme-l">订单号</div>
											<div class="text-itme-r">51268989562626</div>
										</div>
										<div class="isPayStatus-item">
											<div class="text-itme-l">支付方式</div>
											<div class="text-itme-r">微信支付</div>
										</div>
										<div class="isPayStatus-item">
											<div class="text-itme-l">订单金额</div>
											<div class="text-itme-r">365.26</div>
										</div>
									</div>
									<div class="isPayStatus-fd">
										<div class="isPayStatus-fd-l-but">查看订单</div>
										<div class="isPayStatus-fd-r-but">返回首页</div>
									</div>
							</div>
					</div>
        </el-dialog>





      </div>
</template>

<script>
import QRCode from 'qrcodejs2'
export default {
  data() {
    return {
      configIdList:'',
      configId:'',
      qrCodeUrlcod: false,
			isPayStatus:false,
			isOut:false,
      disabled:false,
      tableData:[],
      searchinput:'',
      current: 1,
      indent: 1,
      formData: {
				money:'',
		  },
      rules: {
        money: [{
							required: true,
							message: '请输入充值金额',
						},{
							validator:function(rule, value, callback){
								if (value<=0) {
									callback(new Error('充值金额需大于0'))
								}
								else{
									callback();
								}

							}
						}
					],
      },


     
    };
  },

  mounted(){
     this.$apis.zfbpayList().then(res=>{
        this.configIdList=res.data.data.list
        this.configId=this.configIdList[0].id
        console.log(this.configId)
     })
  },
  methods: {
    tabtop(e) {
      this.current = e;
    },
    orderform(e) {
      this.indent = e;
    },

    rechargBut(){

        this.$refs.form.validate(valid=>{
          if(valid){
            this.disabled=true
            this.qrCodeUrlcod=true
					  this.creatQrCode("3213213132")
          }else{
            return false;
          }

				
			})

    },

    creatQrCode (url) {
					var qrcode = new QRCode(this.$refs.qrCodeUrl, {
						text: url, // 需要转换为二维码的内容
						width: 320,
						height:320,
						colorDark: '#000000',
						colorLight: '#ffffff',
						correctLevel: QRCode.CorrectLevel.H
					})
				}

  },
};
</script>

<style lang="less" scoped>
.content {
  display: flex;
   height: 85vh;
}
.myorderform {
  flex: 1;
  background-color: #fafafa;

}
.myset {
  text-align: center;
  padding: 70px 20px 50px;
  font-size: 16px;
  img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin-bottom: 10px;
  }
  div {
    span {
      color: #d1483f;
    }
  }
}
.myorderform-title {
  font-size: 18px;
  margin-bottom: 30px;
  text-align: center;
}
.goodsbuy {
  padding:15px 0px;
  color: #828282;
  font-size: 18px;
  cursor: pointer;
  text-align: center;
}
.goodsbuyatv {
  border-left: 4px solid #d82141;
  background-color: #fff;
}
.orderform {
  background-color: #fff;
  padding: 60px 40px;
  flex: 4;
  box-sizing: border-box;
}
.allorders {
  display: flex;
}
.cancellation-order {
  border-right: 2px solid #ddd;
  padding:0px 30px;
  cursor: pointer;
  font-size: 16px;
  font-weight:bold;
}
.cancellation-active {
  color: #d82141;
}
.cancellation-order:last-child {
  border: none;
}
.cancellation-order:first-child {
  padding-left: 0;
}
.uni-input {
  border: 1px solid #e4e4e4;
  width: 30%;
  border-radius: 10px;
  padding: 10px 0;
  padding-left: 20px;
  margin-bottom: 40px;
}
.indent-select {
  display: flex;
  .uni-data-select {
    margin-right: 10px;
  }
  img {
    width: 80px;
    height: 60px;
  }
}
.uni-stat__select {
  margin-right: 40px;
  margin-bottom: 40px;
}
.seedetails {
  color: #fff;
  background: linear-gradient(#d82141, #f36638);
}


.search-programa{
  margin: 20px 0px;
  display: flex;
  align-items: center;
.search-but{
  width: 40px;
  height: 28px;
  background: url('../assets/images/select.png') no-repeat;
  background-size: contain;
  border: none;
  margin-left: 10px;
}
.search-input{
 
  width: 250px;
  
}
}
.recharge-hd{
  border-left: 3px solid #d82141;
  padding:2px 10px;
  margin-bottom:50px;
}
.recharge-bd{
  width:450px;
  margin-left: 150px;
}

.recharg-but{
  margin-left: 100px;
  margin-top: 50px;
}


</style>